<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>react-color-picker</title>
  <link rel="stylesheet" href="https://www.unpkg.com/ew-color-picker/dist/ew-color-picker.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      padding: 20px;
      background-color: #fff;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  </style>
</head>

<body>
  <div id="app"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://www.unpkg.com/ew-color-picker/dist/ew-color-picker.min.js"></script>

<script type="text/babel">
  const root = document.querySelector('#app');
  // hook写法
  // const ColorPicker = (props) => {
  //     const [color,setColor] = React.useState("");
  //     let handler = (color) => {
  //         setColor(color);
  //     };
  //     React.useEffect(() => {
  //         new ewColorPicker({
  //           el:"#color-picker",
  //           size:"mini",
  //           isLog:false,
  //           alpha:true,
  //           predefineColor:["#fff","#2396ef"],
  //           sure:handler,
  //           clear:handler
  //         });
  //         return null;
  //     },[])
  //     return (
  //       <div className="container" style={ {'background-color':color} }>
  //          <div id="color-picker"></div>
  //       </div>
  //     )
  // }
  // class写法
  class ColorPicker extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        color:""
      }
    }
    handler = (color) => {
        this.setState({
          color:color
        })
    };
    componentDidMount(){
      let that = this;
      new ewColorPicker({
        el:"#color-picker",
        size:"mini",
        isLog:false,
        alpha:true,
        predefineColor:["#fff","#2396ef"],
        sure:that.handler,
        clear:that.handler
      });
    }
    render(){
      return (
        <div className="container" style={ {'background-color':this.state.color} }>
            <div id="color-picker"></div>
         </div>
      )
    }
  }
  ReactDOM.render(<ColorPicker />, root)
</script>

</html>